<template>
  <div class="goods-list" style="padding-top: 10px">
    <!-- 轮播 -->
    <Banner />
    <!-- 商品区 -->
    <div
      class="goods-content"
      v-for="(goodsItem, index) in goodsList"
      :key="index"
    >
      <div class="all-title">{{ goodsItem.goodsTitle }}</div>
      <ul>
        <li
          v-for="(item, index) in goodsItem.goodsList"
          :key="index"
          @click="goDetails(goodsItem.goodsTypeId, item.id)"
        >
          <div class="goods-img">
            <img :src="item.imgUrl" alt="" />
          </div>
          <div class="goods-info">
            <div class="title">{{ item.goodsTitle }}</div>
            <div class="des">{{ item.des }}</div>
            <div class="goods-buy">
              <div class="price"><span>¥</span>{{ item.price }}</div>
              <div class="btn">选规格</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Banner from "@/components/Banner";
export default {
  components: {
    Banner,
  },
  props: ["goodsList"],
  methods: {
    goDetails(goodsTypeId, goodsId) {
      this.$router.push(`/details/${goodsTypeId}/${goodsId}`).catch(() => {});
    },
    _initTops() {
      let tops = [];
      let top = 0;
      tops.push(top);
      // 收集tops
      let lis = document.querySelectorAll(".goods-content"); // 伪数组
      Array.prototype.slice.call(lis).forEach((li) => {
        top += li.clientHeight;
        tops.push(top);
      });
      // 更新tops
      this.$parent._data.tops = tops;
    },
  },
  watch: {
    goodsList(val) {
      this.$nextTick(() => {
        this._initTops();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.goods-list {
  padding-bottom: 100px;
}
.goods-content {
  width: 250px;
  margin: 0 auto;
}

.all-title {
  font-size: 18px;
  font-weight: 500;
  margin: 30px 0;
}

ul {
  li {
    width: 100%;
    height: 140px;
    margin-bottom: 30px;
    display: flex;

    .goods-img {
      width: 90px;
      height: 140px;
      padding: 10px;
      box-sizing: border-box;

      img {
        width: 100%;
      }
    }

    .goods-info {
      flex: 1;
      padding-top: 5px;

      .title {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .des {
        font-size: 14px;
        color: #666666;
        line-height: 20px;
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
      }

      .goods-buy {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 40px;

        .price {
          font-weight: 500;
          font-size: 18px;

          span {
            font-size: 16px;
            margin-right: 3px;
          }
        }

        .btn {
          width: 65px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          font-size: 14px;
          border-radius: 15px;
          color: #fff;
          background-color: #0151c6;
        }
      }
    }
  }
}
</style>
